import Svg,{
  Circle,
  Ellipse,
  G,
  Text,
  TSpan,
  TextPath,
  Path,
  Polygon,
  Polyline,
  Line,
  Rect,
  Use,
  Image,
  Symbol,
  Defs,
  LinearGradient,
  RadialGradient,
  Stop,
  ClipPath,
  Pattern,
  Mask,
} from 'react-native-svg';

/* Use this if you are using Expo
import { Svg } from 'expo';
const { Circle, Rect } = Svg;
*/

import React from 'react';
import { View, StyleSheet, Dimensions } from 'react-native';

// Percentages work in plain react-native but aren't supported in Expo yet, workaround with this or onLayout
const { width, height } = Dimensions.get('window');

export default class SvgExample9 extends React.Component {

  /**
   <Defs>
     <Path
     id="path"
     d={path}
     />
   </Defs>等同于
   <Path
   fill="none"
   id="path"
   d={path}
   />
   */
  render() {
    const path="M 40 60 A 50 10 0 0 0 200 60";
    return (
      <View style={{...StyleSheet.absoluteFill,alignItems: 'center', justifyContent: 'center' }}>
        <Svg
          height="200"
          width="200"
        >

            <Path
              id="path"
              d={path}
            />

          <G y="20">
            <Text
              fill="blue"

            >
              <TextPath href="#path" startOffset="-10%">
                We go up and down,
                <TSpan fill="red" dy="5,5,5">then up again</TSpan>
              </TextPath>
            </Text>
            <Path
              id="path"
              d={path}
              fill="none"
              stroke="red"
              strokeWidth="1"
            />
          </G>
        </Svg>
      </View>
    );
  }
}